import React, { Component } from 'react';
import {
  View,
  Text,
  StyleSheet,
  TextInput,
} from 'react-native';

import PxToDp from '../../../utils/PxToDp';
import { editPriceMsg } from '../../../actions/communicateAction';
import FontFamilys from '../../../utils/FontFamilys';

class PersonalInfo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      orderTime: '',
      username: '',
      phones: '',
      sex: '',
      address: '',
      salerUsername: '',
    };
  }

  _getDate() {
    const date = new Date();
    const year = date.getFullYear();
    let month = date.getMonth() + 1;
    let day = date.getDate();
    if (month.toString().length === 1) {
      month = `0${month}`;
    }
    if (day.toString().length === 1) {
      day = `0${day}`;
    }

    return `${year}-${month}-${day}`;
  }

  componentWillMount() {
    this.setState({ orderTime: this._getDate() });
  }

  render() {
    const { user, car, dealerInfo } = this.props;

    return (
      <View style={[styles.section]}>

        <View style={styles.delBg}>
          <View style={[styles.row, styles.delRow]}>
            <Text style={styles.nameText}>经销商</Text>
            <Text style={styles.dealValue}>{dealerInfo.dealer.name}</Text>
          </View>
          <View style={[styles.row, styles.delRow]}>
            <Text style={styles.nameText}>经销商地址</Text>
            <Text style={styles.dealValue}>{dealerInfo.dealer.address}</Text>
          </View>
          <View style={[styles.row, styles.delRow]}>
            <Text style={styles.nameText}>下单时间</Text>
            <Text style={styles.dealValue}>{this.state.orderTime}</Text>
          </View>
          <View style={[styles.row, styles.delRow]}>
            <Text style={styles.nameText}>目标车型</Text>
            <Text style={styles.dealValue}>{car.modeldesc}</Text>
          </View>

        </View>


        <View style={styles.titleBg}>
          <Text style={styles.sectionTitle}>客户信息</Text>
        </View>

        <View style={[styles.item, styles.top25]}>
          <Text style={styles.itemTitle}>姓名</Text>
          <TextInput
            style={[styles.itemContent]}
            defaultValue={user.username}
            onChangeText={(username) => {
              this.setState({ username });
              this.props.dispatch(editPriceMsg(username, this.state.phone,
                this.state.sex, this.state.address, this.state.salerUsername));
            }
           }
            underlineColorAndroid="transparent"
          />
        </View>
        <View style={[styles.item]}>
          <Text style={styles.itemTitle}>电话</Text>
          <Text style={[styles.itemContent]}>{user.phone}</Text>
        </View>
        <View style={[styles.item]}>
          <Text style={styles.itemTitle}>性别</Text>
          <TextInput
            style={[styles.itemContent]}
            defaultValue={user.sex === 1 ? '男' : '女'}
            onChangeText={(sex) => {
              this.setState({ sex });
              this.props.dispatch(editPriceMsg(this.state.username, this.state.phone,
                sex, this.state.address, this.state.salerUsername));
            }
            }
            underlineColorAndroid="transparent"
          />
        </View>
        <View style={[styles.item]}>
          <Text style={styles.itemTitle}>所在地</Text>
          <TextInput
            style={[styles.itemContent]}
            defaultValue={user.address}
            onChangeText={(address) => {
              this.setState({ address });
              this.props.dispatch(editPriceMsg(this.state.username, this.state.phone,
                this.state.sex, address, this.state.salerUsername));
            }}
            underlineColorAndroid="transparent"
          />
        </View>
        {
          dealerInfo.dealer ?
            <View style={{ width: '100%' }}>
              <View style={[styles.item]}>
                <Text style={styles.itemTitle}>销售顾问</Text>
                <TextInput
                  style={[styles.itemContent]}
                  defaultValue={dealerInfo.saler.username}
                  onChangeText={(salerUsername) => {
                    this.setState({ salerUsername });
                    this.props.dispatch(editPriceMsg(this.state.username, this.state.phone,
                      this.state.sex, this.state.address, salerUsername));
                  }}
                  underlineColorAndroid="transparent"
                />
              </View>
            </View> : null
        }
      </View>
    );
  }
}

const styles = StyleSheet.create({
  section: {
    width: '100%',
    backgroundColor: '#fff',
    paddingLeft: PxToDp(20),
    paddingRight: PxToDp(20),
  },
  row: {
    flexDirection: 'row',
  },
  sectionTitle: {
    color: '#000000',
    fontSize: PxToDp(15),
    fontFamily: FontFamilys(),
  },
  titleBg: {
    backgroundColor: '#f8f8f9',
    paddingLeft: PxToDp(10),
    justifyContent: 'center',
    height: PxToDp(38),
    marginTop: PxToDp(20),
  },
  item: {
    flexDirection: 'row',
    alignItems: 'center',
    width: PxToDp(341),
    paddingBottom: PxToDp(10),
    marginBottom: PxToDp(12),

    borderStyle: 'solid',
    borderColor: '#ededed',
    borderBottomWidth: PxToDp(1),
  },
  itemTitle: {
    width: PxToDp(106),
    fontSize: PxToDp(14),
    color: '#666',
  },
  itemContent: {
    width: PxToDp(164),
    fontSize: PxToDp(14),
    color: '#666',
  },
  top25: {
    marginTop: PxToDp(25),
  },
  delBg: {
    paddingLeft: PxToDp(14),
    paddingRight: PxToDp(14),
    backgroundColor: '#f8f8f9',
    paddingBottom: PxToDp(14),
  },
  delRow: {
    justifyContent: 'space-between',
    paddingTop: PxToDp(14),
  },
  nameText: {
    color: '#8b8c8e',
    fontSize: PxToDp(12),
    fontFamily: FontFamilys(),
  },
  dealValue: {
    color: '#121212',
    fontSize: PxToDp(13),
    fontFamily: FontFamilys(),
  },
});

export default PersonalInfo;
